<template>
	<view class="inwardTransOrderAdd">
		<uni-nav-bar color="#ffffff" background-color="#00aded" :statusBar="true" title="派车" fixed="true" />
		<view class="iinwardTransOrderAdd_top"></view>
		<view class="inwardTransOrderAdd_main">
			<!-- <dil-grad-form
				:stepOptions="stepOptions"
				:stepActive="stepActive"
				:formList="formList"
				:formValue="formValue"
				@next="next"
				@previous="previous"
				@cancelForm="cancelForm"
				@submitGradForm="submitGradForm"
			></dil-grad-form> -->
			<dil-Form formId="761" ref="form" v-model="formValue" class="dilForm" labelPosition="left" labelWidth="90px"></dil-Form>
		</view>
		<view class="inwardTransOrderAdd_floot">
			<button type="warn" @click="cancelForm(formValue)">取消</button>
			<button type="primary" @click="submitGradForm(formValue)">提交</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			navBarTitle: '',
			stepOptions: [{ title: '主体信息' }, { title: '派车信息' }],
			stepActive: 0,
			formList: [
				{
					formId: 616,
					formValue: {}
				},
				{
					formId: 617,
					formValue: {}
				}
			],
			formValue: {},
			submitFormValue: {
				planChildren: [
					{
						planChildId: '',
						materialNumber: ''
					}
				],
				lineId: '',
				capacityId: '',
				driverId: '',
				driverId2: '',
				remark: '',
				taskType: ''
			}
		};
	},
	watch: {
		'formValue.driverId'(val_new, val_old) {
			// this.getCapacityDriver();
			console.log('driverId:' + val_old + '->' + val_new);
			if (val_new) {
				this.getCapacityDriverSelect();
			}
		},
		'formValue.capacityId'(val_new, val_old) {
			// this.getCapacityDriver();
			console.log('capacityId:' + val_old + '->' + val_new);
			if (val_new) {
				this.getCapacityDriverSelect();
			}
		},
		deep: true
	},
	computed: {
		...mapState('inward', ['inwardTransOrderItem'])
	},
	onLoad() {
		this.formValue = this.inwardTransOrderItem;
		console.log('this.formValue: ', this.formValue);
	},
	onShow() {
		let pages = getCurrentPages();
		if (pages.length <= 1) {
			this.back();
		}
	},
	methods: {
		back() {
			this.$emit('onShow');

			// #ifdef APP-PLUS
			uni.navigateBack();
			// #endif

			// #ifdef H5
			this.$router.back();
			// #endif
		},
		//步骤，上一步
		previous(index, form) {
			this.formValue = form;
			this.stepActive = index;
		},
		next(index, form) {
			this.formValue = form;
			this.stepActive = index;
		},
		//取消事件
		cancelForm(form) {
			this.formValue = form;
			this.back();
			uni.showToast({
				title: '用户取消操作',
				icon: 'error',
				duration: 2000
			});
		},
		//提交事件
		async submitGradForm(form) {
			this.formValue = form;
			console.log(this.formValue, 'formValue');
			if (this.formValue.otherOperational && this.formValue.otherOperational.length > 0) {
				this.formValue.alternateFields11 = this.formValue.otherOperational[0] || null;
				this.formValue.alternateFields12 = this.formValue.otherOperational[1] || null;
				this.formValue.alternateFields13 = this.formValue.otherOperational[2] || null;
				this.formValue.alternateFields14 = this.formValue.otherOperational[3] || null;
				this.formValue.alternateFields15 = this.formValue.otherOperational[4] || null;
			}
			uni.showLoading({
				title: '派车中，请等待'
			});
			let map = form;
			map.list = [JSON.parse(JSON.stringify(form))];
			const res = await this.$myRequest({
				url: '/api/v1/tms/dispatchTask',
				data: map
			}).catch((err) => {
				uni.showToast({
					duration: 2000,
					title: err,
					icon: 'error'
				});
			});
			uni.hideLoading(); //关闭loading
			if (res.data.status == 'succeed') {
				uni.showToast({
					title: res.data.message,
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					this.back();
				}, 2100);
			} else {
				uni.showToast({
					title: res.data.message,
					icon: 'error',
					duration: 2000
				});
			}
		},
		async getCapacityDriver() {
			if (typeof this.formValue.capacityId == 'undefined' || typeof this.formValue.driverId == 'undefined') {
				const res = await this.$myRequest({
					url: '/api/v1/uc/getCapacityDriver',
					data: this.formValue
				}).catch((e) => {
					uni.showToast({
						duration: 2000,
						title: e,
						icon: 'error'
					});
				});
				if (res.data.status == 'succeed') {
					if (typeof this.formValue.capacityId == 'undefined') {
						this.formValue.capacityId = res.data.data.capacityId;
					}
					if (typeof this.formValue.driverId == 'undefined') {
						this.formValue.driverId = res.data.data.driverId;
					}
				}
			}
		},
		async getCapacityDriverSelect() {
			if (typeof this.formValue.capacityId == 'undefined' || typeof this.formValue.driverId == 'undefined') {
				const res = await this.$myRequest({
					url: '/api/v1/uc/getCapacityDriverSelect',
					data: this.formValue
				}).catch((e) => {
					uni.showToast({
						duration: 2000,
						title: e,
						icon: 'none'
					});
				});
				if (res.data.status == 'succeed') {
					//选择车辆
					if (typeof this.formValue.capacityId == 'undefined' && this.formValue.driverId) {
						let _this = this;
						let itemList = res.data.data;
						let labelList = [];
						itemList.forEach((item) => {
							labelList.push(item.capacityNumber);
						});
						uni.showActionSheet({
							itemList: labelList,
							success(res) {
								_this.$set(_this.formValue, 'capacityId', itemList[res.tapIndex].capacityId);
							},
							fail(res) {
								console.log(res.errMsg);
							}
						});
					}
					//选择司机
					if (typeof this.formValue.driverId == 'undefined' && this.formValue.capacityId) {
						let _this = this;
						let itemList = res.data.data;
						let labelList = [];
						itemList.forEach((item) => {
							labelList.push(item.driverName);
						});
						uni.showActionSheet({
							itemList: labelList,
							success(res) {
								_this.$set(_this.formValue, 'driverId', itemList[res.tapIndex].driverId);
							},
							fail(res) {
								console.log(res.errMsg);
							}
						});
					}
				}
			}
		}
	}
};
</script>

<style scoped lang="scss">
.inwardTransOrderAdd {
	&_top {
	}
	&_main {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	&_floot {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
